<template>
  <div class="container">
  <!-- <div ref="chart" style="height: 21vh; width: 100%"></div> -->
    <div class="content">
      <span style="width: 800px; display: flex; align-items: center">
        <router-link class="back-link" to="/main/renshi">
          <i class="el-icon-arrow-left"></i>
          返回
        </router-link>
      </span>
      <div class="section-header">
        <div class="section-title">
          <span>📈</span>
          <span>统计分析</span>
        </div>
        <div class="section-desc">各项人事数据的统计与分析</div>
      </div>
      <div class="button-container">
        <router-link class="nav-button" to="#">
          <span class="i">📈</span>
          <span>入职人员统计</span>
        </router-link>
        <router-link class="nav-button" to="#">
          <span class="i">📈</span>
          <span>在职人员统计</span>
        </router-link>
        <router-link class="nav-button" to="#">
          <span class="i">📈</span>
          <span>离职人员统计</span>
        </router-link>
        <router-link class="nav-button" to="#">
          <span class="i">📈</span>
          <span>人事调动统计</span>
        </router-link>
        <router-link class="nav-button" to="#">
          <span class="i">📈</span>
          <span>合同签订统计</span>
        </router-link>
        <router-link class="nav-button" to="#">
          <span class="i">📈</span>
          <span>员工奖惩统计</span>
        </router-link>
        <router-link class="nav-button" to="#">
          <span class="i">📈</span>
          <span>招聘录用统计</span>
        </router-link>
        <router-link class="nav-button" to="#">
          <span class="i">📈</span>
          <span>员工培训统计</span>
        </router-link>
        <router-link class="nav-button" to="#">
          <span class="i">📈</span>
          <span>人事编制统计</span>
        </router-link>
        <router-link class="nav-button" to="#">
          <span class="i">📈</span>
          <span>人事结构统计</span>
        </router-link>
      </div>
    </div>
  </div>
</template>
<!-- <script>
export default {
mounted() {
    this.checkScrollbar();
    window.addEventListener('resize', this.checkScrollbar);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkScrollbar);
  },
  methods: {
    checkScrollbar() {
      const div = this.$refs.chart;
      if (document.body.scrollHeight > window.innerHeight) {
        div.style.display = 'none';
      } else {
        div.style.display = 'block';
      }
    }
  }
};
</script> -->
<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: antiquewhite;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  .i {
    font-size: 24px !important;
    margin-bottom: 12px;
    transition: all 0.3s ease;
  }

  .content {
    background-color: #fff;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 800px;
    height: 650px;
    margin: 0 auto;

    .section-header {
      text-align: center;
      margin-bottom: 40px;

      .section-title {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, #409eff, #66b1ff);
        color: white;
        padding: 12px 24px;
        border-radius: 10px;
        margin-bottom: 30px;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);

        i {
          margin-right: 8px;
          font-size: 20px;
        }

        span {
          font-size: 20px;
          font-weight: 500;
        }
      }

      .section-desc {
        color: #909399;
        font-size: 16px;
      }
    }

    .page-header {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      padding: 16px 24px;
      border-radius: 8px 8px 0px 0px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      width: 800px;
      margin: 0 auto;
    }

    .back-link {
      align-items: center;
      text-decoration: none;
      color: #409eff;
      // font-size: 14px;
      margin-right: 20px;
      transition: all 0.3s;

      i {
        margin-right: 5px;
      }

      &:hover {
        opacity: 0.8;
      }
    }

    h1 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }

    .button-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: 800px;
      margin: 0px auto;
      gap: 20px;

      .nav-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background-color: #f5f7fa;
        color: #606266;
        padding: 24px;
        border-radius: 8px;
        transition: all 0.3s ease;
        border: 1px solid #ebeef5;
        height: 100px;

        i {
          font-size: 24px;
          margin-bottom: 12px;
          color: #409eff;
          transition: all 0.3s ease;
        }

        span {
          font-size: 18px;
          font-weight: 500;
          white-space: nowrap;
        }

        &:hover {
          transform: translateY(-5px);
          background-color: #ecf5ff;
          border-color: #409eff;
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);

          i {
            transform: scale(1.2);
          }

          span {
            color: #409eff;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .container {
    padding: 12px;

    .page-header {
      padding: 12px 16px;
    }

    .content {
      padding: 20px 16px;

      .section-header {
        margin-bottom: 24px;

        .section-title {
          padding: 8px 16px;

          i {
            font-size: 18px;
          }

          span {
            font-size: 16px;
          }
        }
      }

      .button-container {
        grid-template-columns: 1fr;
        padding: 0;

        .nav-button {
          padding: 16px;
          height: auto;
          flex-direction: row;
          justify-content: flex-start;

          i {
            margin-bottom: 0;
            margin-right: 12px;
          }
        }
      }
    }
  }
}
</style>